<!-- 订单详情 -->
<template>
	<view class="">
		<view class="padding30">
			<view class="price-color" style="font-weight: bold;">{{statusObj[orderInfo.orderStatus]}}</view>
			<view class="flex-bettwen bg-white br16 padding20 m-t20">
				<u-icon name="map-fill" class="w-50" size="40"></u-icon>
				<view class="m-l20 flex1">
					<view class="" style="font-weight: bold;">{{orderInfo.subscriberAddress.receiver}}</view>
					<view class="fs26 m-t10">{{orderInfo.subscriberAddress.tel}}</view>
					<view class="fs26 m-t10">
						{{orderInfo.subscriberAddress.province}}{{orderInfo.subscriberAddress.area}}{{orderInfo.subscriberAddress.city}}{{orderInfo.subscriberAddress.address}}
					</view>
				</view>
			</view>
			
			<view class="bg-white br16 padding20 m-t20">
				<view class="flex-bettwen">
					<view class="flex-center">
						<image :src="orderInfo.appUser.avatar || '../../static/avatar.png'" mode=""
							class="w-50 h-50 br50 m-r20"></image>
						<text>{{orderInfo.appUser.nick}}</text>
					</view>
					<view class="">
						<u-button type="primary" size="mini"
							@click="callPhone(orderInfo.subscriberAddress.tel)">联系买家</u-button>
					</view>
				</view>
				<view class="flex m-t20" v-if="orderInfo.productType == 4">
					<u-lazy-load :image="orderInfo.quote.picture" class="w-130 h-130 m-r20 br16 hidden"></u-lazy-load>
					<view class="flex flex1">
						<view class="flex1 flex-column-between" style="">
							<view class="text-overflow3 fs26">{{orderInfo.quote.details}}
							</view>
							<view class="">
								<u-tag v-if="orderInfo.quote.isCustomized == 1" text="接受定做" mode="light" type="success"
									class="m-r10" />
								<u-tag text="48小时发货" mode="light" type="info" class="m-r10" />
								<u-tag text="货到付款" mode="light" type="info" />
							</view>
						</view>
					</view>
				</view>

				<view class="" v-if="orderInfo.productType !== 4">
					<view class="" v-for="(item,index) in orderInfo.productVoList" :key="index">
						<view class="flex">
							<image :src="item.cover" class="w-130 h-130 m-r20 br16 hidden" mode=""></image>
							<view class="flex flex1">
								<view class="flex1 flex-column-between" style="">
									<view class="text-overflow2 fs26">{{item.productName}}
									</view>
									<view class="">
										<u-tag text="48小时发货" mode="light" type="info" class="m-r10" />
										<u-tag text="货到付款" mode="light" type="info" />
									</view>
								</view>
							</view>
						</view>



						<view class="m-t20 fs26" v-for="(vv,ii) in item.goodsList" :key="ii">
							<view class="">
								<text class="color-gray ">类型：</text>
								<text>{{vv.key}}</text>
							</view>

							<view class="order-item-content" v-for="(key, id) in vv.value" :key="id">
								<view class="padding10 flex-bettwen">
									<view class="flex-center">
										<image class="m-r20 w-50 h-50 br16" :src="key.color.icon | concatRequestUrl">
										</image>
										<text class="order-item-num">色号：{{key.color.name}}</text>
									</view>
									<view class="">
										<text class="price-color fs26">￥{{key.salePrice}}</text>
										<text class="fs26">x{{key.number}}/米</text>
									</view>

								</view>
							</view>
						</view>
					</view>


				</view>



				<view class="flex-bettwen m-t20">
					<view class="color-gray">商品总价</view>
					<view class="">￥{{orderInfo.totalAmount}}</view>
				</view>
				<view class="flex-bettwen m-t20">
					<view class="color-gray">运费（快递/物流）</view>
					<view class="">￥0.00</view>
				</view>
				<view class="flex-bettwen m-t20">
					<view class="color-gray">店铺优惠</view>
					<view class="">-￥0.00</view>
				</view>
				<view class="flex-bettwen m-t20">
					<view class="color-gray">实收货款</view>
					<view class="price-color fs32" style="font-weight: bold;">￥{{orderInfo.totalAmount}}</view>
				</view>
			</view>


			<view class="bg-white br16 padding20 m-t20">
				<view class="">订单信息</view>
				<view class="flex-bettwen m-t20">
					<view class="color-gray">订单编号</view>
					<view class="flex-center">
						<text>{{orderInfo.orderNo}}</text>
						<image src="/static/images/copy-icon.png" mode="" class="w-30 h-30 m-l20"
							@click="copyText(orderInfo.orderNo)"></image>
					</view>
				</view>
				<view class="flex-bettwen m-t20">
					<view class="color-gray">订单类型</view>
					<view class="">{{productTypeObj[orderInfo.productType]}}订单</view>
				</view>
				<view class="flex-bettwen m-t20">
					<view class="color-gray">创建时间</view>
					<view class="">{{orderInfo.createTime}}</view>
				</view>

				<view class="flex-bettwen m-t20" v-if="orderInfo.payTime">
					<view class="color-gray">付款时间</view>
					<view class="">{{orderInfo.payTime}}</view>
				</view>
			</view>



		</view>

		<view class="h-150"></view>
		<view class="footer footer-box h-130 padding-lr30 flex-bettwen bg-white">
			<text>更多</text>
			<!-- 	<view class="flex-center">
				<u-button type="primary" :custom-style="{'padding':20+'rpx'}" class="m-r20"
					size="medium" @click="callPhone(orderInfo.subscriberAddress.tel)">联系买家</u-button>
				<u-button type="info" class="m-r20" size="medium" :custom-style="{'padding':20+'rpx'}">修改价格</u-button>
				<u-button type="info" size="medium" :custom-style="{'padding':20+'rpx'}" @click="showToast">备注</u-button>
			</view> -->

			<view class="flex-center" v-if="orderInfo.orderStatus == 0">
				<u-button size="mini" class="m-r20" type="primary"
					@click="callPhone(orderInfo.subscriberAddress.tel)">联系买家</u-button>
				<u-button size="mini" class="m-r20" @click="updatePrice">修改价格</u-button>
				<u-button size="mini" @click="showToast">备注</u-button>
			</view>
			<view class="flex-center" v-if="orderInfo.orderStatus == 1">
				<u-button size="mini" class="m-r20" type="primary"
					@click="callPhone(orderInfo.subscriberAddress.tel)">联系买家</u-button>
				<u-button size="mini" class="" @click="updateOrderStatusEvent(2)">发货</u-button>
			</view>
			<view class="flex-center" v-if="orderInfo.orderStatus == 2">
				<u-button size="mini" class="m-r20" type="primary"
					@click="callPhone(orderInfo.subscriberAddress.tel)">联系买家</u-button>
				<u-button size="mini" class="m-r20" @click="showToast">查看物流</u-button>
				<u-button size="mini" class="" @click="showToast">提醒收货</u-button>
			</view>
			<view class="flex-center" v-if="orderInfo.orderStatus == 3">
				<u-button size="mini" class="m-r20" type="primary"
					@click="callPhone(orderInfo.subscriberAddress.tel)">联系买家</u-button>
				<u-button size="mini" class="m-r20" @click="showToast">查看物流</u-button>
				<u-button size="mini" class="" @click="showToast">提醒评价</u-button>
			</view>
		</view>


		<!-- 关闭提示 -->
		<u-modal v-model="showSureClose" @cancel="cancelEvent" @confirm="confirmEvent" :content="content"
			mask-close-able show-cancel-button cancel-text='取消' confirm-text="确认"></u-modal>


		<!-- 修改价格弹窗 -->
		<u-popup v-model="editPriceWin" mode="bottom">
			<view class="center fw500 fs34 padding30">修改价钱</view>
			<view class="padding30 flex-bettwen">
				<view class="">
					<input type="number" v-model="totalAmount" placeholder="请输入修改价钱" />
					<view class="line-x"></view>
				</view>
				<u-button type="primary" @click="changPrice" size="medium">修改</u-button>
			</view>

			<view class="h-100"></view>
		</u-popup>
	</view>

</template>

<script>
	import {
		orderDetail,
		updateOrderStatus
	} from '@/api/order/index'


	export default {
		data() {
			return {
				orderId: "",
				userId: '',
				orderInfo: {},
				statusObj: { // 订单状态枚举
					0: '待买家支付',
					1: '待发货',
					2: '待收货',
					3: '待评价',
					4: '已关闭',
					5: '已完成'
				},
				productTypeObj: { // 商品类型枚举
					1: '大货',
					2: '剪样',
					3: '色卡',
					4: '询报价'
				},
				showSureClose: false,
				editPriceWin: false,
				totalAmount: 0,
				content: '确认修改价钱吗？'
			}
		},
		onLoad(options) {
			this.orderId = options.orderId
			this.userId = uni.getStorageSync('shopInfo').userId

			this.getOrderInfo()
		},
		methods: {
			clickevent(){
				console.log(this.totalAmount);
			},
			// 更新订单状态
			async updateOrderStatusEvent(status) {
				// status 0 - 待付款 1 - 待发货 2 - 待收货 3 - 待评价 4 - 已完成

				let res = await updateOrderStatus({
					orderId: this.orderId,
					orderStatus: status
				})

				if (status == 2) {
					uni.showToast({
						title: '发货成功',
						icon: 'success',
						duration: 2000,
					})
					setTimeout(()=>{
						this.getOrderInfo()
					},2000)
				}


			},
			// 修改价钱
			changPrice() {
				if (!this.totalAmount) {
					return uni.showToast({
						title: '请输入修改的价钱',
						icon: 'none'
					})
				}
				this.showSureClose = true
				this.editPriceWin = false
			},
			// 修改价格
			updatePrice(item) {
				this.editPriceWin = true
			},

			// 确认
			async confirmEvent() {
				uni.showLoading({
					title:'加载中...'
				})
				console.log(this.totalAmount);
				let res = await updateOrderStatus({
					orderId: this.orderId,
					totalAmount: this.totalAmount
				})
				uni.hideLoading()
				uni.showToast({
					title: '修改成功',
					icon: 'success',
					duration: 2000,
				})
				setTimeout(()=>{
					this.getOrderInfo()
				},2000)
			},
			// 取消
			cancelEvent() {

			},
			// 功能暂未开发
			showToast() {
				uni.showToast({
					title: "暂未开发",
					icon: 'none'
				})
			},
			// 取订单详情
			async getOrderInfo() {
				let res = await orderDetail({
					orderId: this.orderId,
					userId: this.userId
				})
				this.orderInfo = res.data
				this.totalAmount = JSON.parse(JSON.stringify(res.data.totalAmount))
				this.orderInfo.productVoList.forEach((productItem) => {
					productItem.goodsList.forEach((element) => {
						element.key = Object.keys(element)[0]
						element.value = element[element.key]
					})
				})

				console.log('这是订单详情', this.orderInfo);
			},

			// 复制文本到剪贴板
			copyText(text) {
				uni.setClipboardData({
					data: text,
					success: function() {
						console.log('复制成功');
						// 可以添加用户友好的提示，例如使用uni.showToast提示复制成功
						uni.showToast({
							title: '复制成功',
							icon: 'success',
							duration: 2000
						});
					},
					fail: function() {
						console.log('复制失败');
						// 可以添加错误处理或用户友好的提示
					}
				});
			},
			// 拨打电话
			callPhone(phoneNumber) {
				// 判断手机是否支持拨打电话功能
				if (uni.canIUse('makePhoneCall')) {
					uni.makePhoneCall({
						phoneNumber: phoneNumber, // 电话号码
						success: function() {
							console.log('拨打电话成功');
						},
						fail: function() {
							console.log('拨打电话失败');
						}
					});
				} else {
					console.log('你的设备不支持拨打电话功能');
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.color-item {
		line-height: 60rpx;
	}

	.footer-box {
		padding-bottom: env(safe-area-inset-bottom);
	}

	.btn-item {
		padding: 10rpx 30rpx;
		border: 2rpx solid #10a4db;
	}

	.order-item-content {
		background: #F7F7F7;
		border-radius: 6upx;
		padding: 10upx 16upx;
		margin-top: 16upx;
	}
</style>